<template>
  <div class="department-container">
    <p class="common-list-bread">部门管理</p>
    <div class="common-query-box">
      <el-button class="common-btn-primary" size="small" @click="onclickAdd"
        >添加一级部门</el-button
      >
    </div>
    <div class="common-table-box">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
        :props="defaultProps"
      >
      </el-tree>
    </div>

      <el-dialog
          :title="title[infoType]"
          :visible.sync="isDialogVisible" 
          :close-on-click-modal="false"
          :before-close="onClickCancelSave"
          custom-class="dialog-form"
          width="485px"
        >
      <el-form :label-width="formLabelWidth">
        <el-form-item label="部门名称：" required>
          <el-input
            v-model.trim="name"
            clearable
            :maxlength="20"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="common-footer-box active">
        <el-button
          class="common-btn-primary "
          size="small"
          @click="onClickAddSaveData"
          >保存</el-button
        >
        <el-button size="small" @click="onClickCancelSave">取消</el-button> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import watchScroll from 'utils/watchScroll'
export default {
  data() {
    const data = [
      {
        id: 1,
        name: "一级 1",
            departmentLevel:1,

        childDepartmentTree: [
          {
            id: 4,
            name: "二级 1-1",
            departmentLevel:2,

            childDepartmentTree: [
              {
                id: 9,
                name: "三级 1-1-1",
            departmentLevel:3,

              },
              {
                id: 10,
                name: "三级 1-1-2",
            departmentLevel:3,

              },
            ],
          },
        ],
      },
      {
        id: 2,
        name: "一级 2",
            departmentLevel:1,

        childDepartmentTree: [
          {
            id: 5,
            name: "二级 2-1",
            departmentLevel:2

          },
          {
            id: 6,
            name: "二级 2-2",
            departmentLevel:2

          },
        ],
      },
      {
        id: 3,
        name: "一级 3",
            departmentLevel:1,

        childDepartmentTree: [
          {
            id: 7,
            name: "二级 3-1",
            departmentLevel:2
          },
          {
            id: 8,
            name: "二级 3-2",
            departmentLevel:2

          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      defaultProps: {
        children: "childDepartmentTree",
        label: "name",
      },
      title:{'1':'添加部门','2':'编辑部门'},
      url:{'1':'/department/saveDepartment','2':'/department/updateDepartment'},
      infoType:1,
      isDialogVisible:false,
      formLabelWidth: "150px",
      name: "",
      departmentLevel: 1,
      curId: '',
    };
  },
  created() {
    // this.asyncGetTreeData();
  },
  methods: {
    handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
    },
    append(data) {
      console.log("谈价");
      console.log(data);
       this.infoType = 1;
      this.name = '';
      this.departmentLevel = data.departmentLevel+1;
      this.curId = data.id;
      this.isDialogVisible = true;
    },
    edit(data) {
      console.log("编辑");
      console.log(data);
      this.infoType = 2;
      this.name = data.name;
      this.departmentLevel = data.departmentLevel+1;
      this.curId = data.id;
      this.isDialogVisible = true;
    },
    remove(node, data) {
      console.log("删除");
      console.log(node, data);
      this.$confirm("确认删除该部门吗？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        center: true,
        customClass: "common-confirm-box",
        confirmButtonClass: "common-btn-primary",
        cancelButtonClass: "common-btn-text",
      }).then(() => {
        this.$axios
          .get("/department/deleteDepartment?id=" + data.id)
          .then((res) => {
            if (res.data.code === 200) {
              this.asyncGetTreeData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
      });
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <i
              class="el-icon-edit-outline actives"
              on-click={() => this.edit(data)}
            ></i>
            {/* data.departmentLevel==3 ? null : */ (<i
              class="el-icon-plus actives"
              on-click={() => this.append(data)}
            ></i> )}
            {data.childDepartmentTree ? null : (
              <i
                class="el-icon-delete actives"
                on-click={() => this.remove(node, data)}
              ></i>
            )}
          </span>
        </span>
      );
    },
    //获取部门管理树
    asyncGetTreeData() {
      this.$axios
        .get("/department/listDepartmentTree")
        .then((res) => {
          if (res.data.code === 200) {
            this.data = res.data.data || [];
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //
    //部门--弹框交互取消
    onClickCancelSave() {
      this.isDialogVisible = false;
    },
    //保存部门信息
    onClickAddSaveData() {
      if(!this.name) {
        this.$message.error('部门名称不能为空');
        return;
      }
      this.$axios
        .post(this.url[this.infoType],{
          id: this.curId,
          departmentLevel: this.departmentLevel,
          name: this.name,
        })
        .then((res) => {
          if (res.data.code === 200) {
              this.isDialogVisible = false;

          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //点击添加
    onclickAdd() {
      this.infoType = 1;
      this.name = '';
      this.departmentLevel = 1;
      this.curId = '';
      this.isDialogVisible = true;
    },
    //编辑
    onClickEdit(id) {
      this.infoType = 2;
      this.userId = id;
      this.isDialogVisible = true;
    },
  },
};
</script>

<style scoped>
 .department-container  /deep/ .actives {
  padding: 0 5px;
}
.department-container .actives:hover {
  color: #5cb6ff;
}
</style>
